const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports={
  mode:'development', // development','production'
  //入口文件的配置项
  entry:path.resolve(__dirname,'src/main.js'),
  //出口文件的配置项
  output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'[name].[hash:8].js'
  },
  //配置webpack开发服务功能
  devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,'dist'),
    host:'localhost',
    compress:true,
    port:8888,
    open: true,
    hot: true
  },
  //模块：例如解读CSS,图片如何转换，压缩
  module:{
    rules:[
      {
        test:/\.css$/,
        use: ExtractTextWebpackPlugin.extract({
          use: [
            // {loader: 'style-loader'},
            {loader: 'css-loader'},
          ]
        })
      },
      {
        test: /\.less$/, 
        use: ExtractTextWebpackPlugin.extract({
          use: [
            // {loader: 'style-loader'},
            {loader: 'css-loader'},
            {loader: 'less-loader'},
          ]
        })
      }
    ]
  },
  //插件，用于生产模版和各项功能
  plugins:[
    new ExtractTextWebpackPlugin({ // 抽离的样式表存放位置
      filename: 'css/style.css'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      inject: 'body',
      hash: true,
    })
  ]
};